<template>
    <div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="sno"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="sname"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="ssex"
                    label="性别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sdept"
                    label="系别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sage"
                    label="年龄"
                    width="300">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="delete1(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--ElementUi的分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                page-size="6"
                :total=total
                @current-change="page">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        methods: {
            edit(row) {
                 console.log(row);
                this.$router.push({
                    path: '/update',
                    query:{
                        sno: row.sno
                    }
                })
            },
            delete1(row){

                const _this=this
                  axios.delete('http://localhost:8181/deleteById/'+row.sno)
                      .then(function (response) {
                          // alert(1111)
                          _this.$alert(''+row.sname+'删除成功！', '提示', {
                              confirmButtonText: '确定',
                              callback: action => {
                                  // _this.$router.push('/findAll')
                                  window.location.reload()//删除之后自动刷新页面
                              }
                          });
                      })
            },
            page(currentPage){
                // alert(currentPage)
                const _this=this
                axios.get('http://localhost:8181/findAll/'+currentPage+'/6')
                    .then(function (response) {
                        _this.tableData=response.data.content
                    })
            }
        },
         created(){
            const _this=this
            axios.get('http://localhost:8181/findAll/1/6')
                .then(function (response) {
                    console.log(response)
                    _this.tableData=response.data.content
                    _this.total=response.data.totalElements
                })
         },
        data() {
            return {
                total:null,
                tableData: null
            }
        }
    }
</script>